<template>
  <div>
    <el-table :data="listTableData" style="width: 100%">
      <el-table-column prop="name" label="操作名称"></el-table-column>
      <el-table-column prop="address" label="向上移动">
        <template slot-scope="scope">
          <el-button size="mini" :disabled="scope.$index === 0" @click="moveUp(scope.$index)">
            <i class="el-icon-arrow-up"></i>
          </el-button>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="向下移动">
        <template slot-scope="scope">
          <el-button size="mini" :disabled="scope.$index === listTableData.length - 1" @click="moveDown(scope.$index)">
            <i class="el-icon-arrow-down"></i>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      listTableData: [
        {
          name: "111",
        },
        {
          name: "222",
        },
        {
          name: "333",
        },
        {
          name: "444",
        },
        {
          name: "555",
        },
      ],
    }
  },
  methods: {
    /**
     * 操作向上移动
     */
    moveUp(index) {
      console.log(this.listTableData);
      // 保存上一条数据
      let updata = this.listTableData[index - 1];
      // 删除上一条的数据
      this.listTableData.splice(index - 1, 1);
      // 将上一条数据插入当前的索引数组
      this.listTableData.splice(index, 0, updata);
    },

    /**
     * 操作向下移动
     */
    moveDown(index) {
      // 保存下一条数据
      let downData = this.listTableData[index + 1];
      // 删除下一条数据
      this.listTableData.splice(index + 1, 1);
      // 将下一条数据插入当前的索引中
      this.listTableData.splice(index, 0, downData);
    },
  },
}
</script>
<style lang="less" scoped></style>
